:host {
  --avatar-size: 3em;

  div.error {
    color: var(--meh-error);
  }

  div.sort-options {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: var(--meh-spacing);
    font-size: 0.9em;
    gap: 0.25em;

    a.active {
      font-weight: bold;
    }
  }

  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--meh-spacing);

      ul {
        padding-left: var(--meh-spacing);
        margin-top: var(--meh-spacing);
      }
  }

  div.comment {
    display: grid;
    grid-template-columns: var(--avatar-size) 1fr;
    grid-template-rows: auto auto auto;
    grid-column-gap: var(--meh-spacing);
    transition: background-color 1.5s ease;

    opacity: 0.5;
    &.status-approved {
      opacity: 1;
    }

    &.highlighted {
      background-color: color-mix(in srgb, var(--meh-accent), transparent 80%);
      transition: none;
    }

    > img.avatar {
      grid-column: 1 / -1;
      grid-row: 1 / 3;

      border-radius: var(--meh-border-radius);
      border: 1px solid  var(--meh-border-color);
      height: var(--avatar-size);
      width: var(--avatar-size);

    }

    > .comment-user {
      grid-column: 2 / -1;
      grid-row: 1 / 2;

      display: flex;
      gap: calc(var(--meh-spacing) / 2);
      align-items: baseline;

      .parent-link {
        font-size: 0.85em;
      }
    }

    > time {
      grid-column: 2 / -1;
      grid-row: 2 / 3;

      font-size: small;
    }

    > div.comment-content {
      grid-column: 2 / -1;
      grid-row: 3 / 4;
      overflow: auto;
    }

    > div.comment-actions {
      grid-column: 2 / -1;
      grid-row: 4 / 5;

      display: flex;
      gap: var(--meh-spacing);
      justify-content: flex-end;
    }

    > :last-child {
      border-bottom: 1px solid var(--meh-border-color);
    }
  }

  /* General styles - needs to cover some arbitrary content elements */

  a {
    color: var(--meh-link-color);
    text-decoration-color: color-mix(in srgb, var(--meh-link-color), transparent 80%);

    &:hover, &:focus, &:active {
      text-decoration-color: var(--meh-link-deco-color);
    }
  }

  a.u-url.mention {
    display: none;
  }

  .comment-content img {
    max-width: 15em;
    max-height: 7em;
  }

  .media-attachments {
    display: flex;
    flex-direction: row;
    gap: var(--meh-spacing);
    flex-wrap: wrap;
  }

  blockquote {
    border-left: 2px solid var(--meh-border-color);
    padding-left: var(--meh-spacing);
    margin-left: 0;
  }
}

